.table-input-container {
  @import "~@/assets/styles/_theme.scss";
  @import "~@/assets/styles/_var.scss";

  .scope-bar {
    display: flex;
    align-self: center;
    justify-content: center;

    .scope-action {
      display: none;
      padding: 0;
    }

    &:hover {
      .scope-value {
        display: none;
      }

      .scope-action {
        display: block;
      }
    }
  }

  .el-table--border {
    border-radius: $radiusSmall;
    border: 1px solid $borderColorPrimary;

    .el-table__cell {
      &:first-child {
        .cell {
          padding-left: 0;
          text-align: center;
        }
      }
    }
  }

  .el-table {
    .th {
      &.el-table__cell {
        background-color: $tableHeaderBgColor;
      }
    }

    .el-table__cell {
      padding: 0;
      border-color: $borderColorPrimary;

      .cell {
        padding: 0;

        .el-select {
          width: 100%;
        }

        .el-input__inner {
          border-color: transparent;
        }
      }
    }

    .el-table__header {
      .el-table__cell {
        height: 2.375rem; // 38px
        line-height: 2.25rem; // 36px
        padding: 0 0.625rem; // 10px
        border-bottom: 1px solid $borderColorPrimary;
      }
    }
  }

  .column-editable-value-bar {
    width: 100%;
    padding: 0 10px; // 10px
    display: flex;

    .icon {
      width: 1.25rem; // 20px
      color: $colorTextInfo;
    }

    .content {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &.option-bar {
    display: flex;

    .main {
      flex: 1;
      width: 11.25rem; // 180
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 0.5rem; // 8px
    }

    .append {
      color: $colorTextSecondary;
      font-size: $fontSizeSmall;
      width: 5.625rem; // 90px
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .display-none {
    display: none;
  }
}
